<template>
    <view class="trading">
        <view>
            <!-- 图表 -->
            <view class="home-echarts-wrap">
                <echarts ref="echarts"></echarts>
            </view>

            <view class="trading-wrap">
                <view class="trading-buy">
                    <view class="trading-buy-title">
                        <view class="tbt-item">
                            <view>单价</view>
                            <text>(RMB)</text>
                        </view>
                        <view class="tbt-item">
                            金额
                            <text>(RMB)</text>
                        </view>
                        <view class="tbt-item">
                            数量
                            <text>(BHT)</text>
                        </view>
                    </view>
                    <view class="trading-buy-list">
                        <block v-for="(item, index) in buyInfo" :key="index" v-if="index < 5">
                            <view class="tbl-item">
                                <view class="buy-type">买单</view>
                                <view class="item">{{item.price}}</view>
                                <view class="item">{{item.totalPrice}}</view>
                                <view class="item color6">{{item.nums}}</view>
                            </view>
                        </block>
                        <view class="trading-buy-list-no" v-if="buyInfo.length <= 0">当前没有挂买单</view>
                    </view>
                </view>
                <view class="trading-now">
                    <view>当前实时价：</view>
                    <view class="price">{{price}}RMB</view>
                </view>
                <view class="trading-sell">
                    <view class="trading-sell-list">
                        <block v-for="(item, index) in sellInfo" :key="index" v-if="index < 5">
                            <view class="tbl-item">
                                <view class="sell-type">卖单</view>
                                <view class="item">{{item.price}}</view>
                                <view class="item">{{item.totalPrice}}</view>
                                <view class="item color6">{{item.nums}}</view>
                            </view>
                        </block>
                        <view class="trading-buy-list-no" v-if="sellInfo.length <= 0">当前没有挂卖单</view>
                    </view>
                </view>
            </view>
        </view>
        <van-popup
            :show="popupShow"
            position="bottom"
            :close-on-click-overlay="false"
            @close="onPopupClose"
        >
            <trading-popup ref="popup" :popupType="popupType" @emitPopupShow="onPopupClose"></trading-popup>
        </van-popup>
        <view class="trading-btn">
            <view class="buy-btn">
                <button hover-class="btn-hover" @tap="onPopupShow('buy')">买入</button>
            </view>
            <view class="sell-btn">
                <button hover-class="btn-hover" @tap="onPopupShow('sell')">卖出</button>
            </view>
        </view>
    </view>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import echarts from "./echarts.vue";
import TradingPopup from "./popup/trading-popup.vue";
export default {
    components: {
        TradingPopup,
        echarts
    },
    data() {
        return {
            price: 0,
            popupShow: false,
            popupType: "buy"
        };
    },
    onShow() {
        this.getBuyList();
        this.getUnitPrice();
        this.getSevenDayUnitPrice();
    },
    computed: {
        ...mapGetters({
            buyInfo: "getBuyInfo",
            sellInfo: "getSellInfo"
        })
    },
    methods: {
        ...mapActions(["setBuyInfo", "setSellInfo"]),
        getBuyList() {
            uni.showLoading({
                title: ""
            });
            this.$http
                .getBuyList({
                    limit: 5
                })
                .then(res => {
                     uni.hideLoading();
                    const data = res.data;
                    if (data.success) {
                        // this.buyList = data.data
                        this.setBuyInfo(data.data);
                        this.getSellList();
                        return;
                    }
                    uni.showToast({
                        title: data.errMsg,
                        icon: "none"
                    });
                });
        },
        getSellList() {
            this.$http
                .getSellList({
                    limit: 5
                })
                .then(res => {
                    const data = res.data;
                    if (data.success) {
                        // this.sellList = data.data
                        this.setSellInfo(data.data);
                        uni.hideLoading();
                        return;
                    }
                    uni.showToast({
                        title: data.errMsg,
                        icon: "none"
                    });
                });
        },
        getUnitPrice() {
            this.$http.getUnitPrice().then(res => {
                const data = res.data;
                uni.stopPullDownRefresh();
                if (data.success) {
                    // if (this.price > 0) {
                    //     this.$refs.echarts.lineChartInit();
                    // } else {
                    //     this.$refs.echarts.setLineOption(data.data);
                    // }
                    this.price = data.data;
                    return;
                }
                this.price = 0;
                uni.showToast({
                    title: data.errMsg,
                    icon: "none"
                });
            });
        },
        getSevenDayUnitPrice: function() {
            this.$http.getSevenDayUnitPrice().then(res => {
                const data = res.data;
                uni.stopPullDownRefresh();
                if (data.success) { if (data.length > 0) {
                      this.$refs.echarts.lineChartInit();
                      } else { 
                    this.$refs.echarts.setLineOption(data.data);
                    }
                    return;
                }
                uni.showToast({
                    title: data.errMsg,
                    icon: "none"
                });
            });
        },
        onPopupShow(type) {
            this.$refs.popup.tabType(type, this.price);
            this.popupShow = true;
        },
        onPopupClose(e) {
            this.popupShow = e;
        }
    },
    onNavigationBarButtonTap(e) {
        if (e.index) {
            uni.navigateTo({
                url: "/pages/trading/record/sell/index?tab=0"
            });
            return;
        }
        uni.navigateTo({
            url: "/pages/trading/record/buy/index?tab=0"
        });
    },
    onPullDownRefresh() {
        this.getBuyList();
        this.getUnitPrice();
    }
};
</script>

<style scoped lang="scss">
.trading {
    padding-bottom: 140upx;
    &-buy,
    &-sell {
        &-title {
            display: flex;
            justify-content: space-around;
            padding: 20upx 20upx 20upx 150upx;
            background-color: #e9eaec;
            .tbt-item {
                display: flex;
            }
        }
        &-list {
            .tbl-item {
                display: flex;
                padding: 20upx 30upx;
                text-align: center;
                color: #1e1e1e;
                background-color: #f1f1f3;
                border-bottom: 1px solid #e7e9f7;
                .buy-type,
                .sell-type {
                    width: 120upx;
                    color: #3e527e;
                }
                .sell-type {
                    color: #1dd445;
                }
                .item {
                    flex: 1;
                }
            }
            &-no {
                padding: 20upx 0;
                text-align: center;
                color: #9b9b9b;
            }
        }
    }
    &-now {
        display: flex;
        justify-content: center;
        padding: 10upx;
        text-align: center;
        background-color: #c9d9f5;
        .price {
            color: red;
        }
    }
    &-btn {
        position: fixed;
        bottom: 20upx;
        left: 100upx;
        right: 100upx;
        z-index: 4;
        display: flex;
        justify-content: space-between;
        .buy-btn,
        .sell-btn {
            button {
                width: 200upx;
                height: 80upx;
                line-height: 80upx;
                font-size: 32upx;
                color: #ffffff;
                border: 0;
                border-radius: 10upx;
                background-color: #3e527e;
            }
        }
        .sell-btn {
            button {
                background-color: #1dd445;
            }
        }
    }
}
</style>
